<template>
  <div class="sidebar_type_content">
    <div class="title">
      <p>传感器类型统计</p>
    </div>
    <div id="charts" ref="type_charts">

    </div>
  </div>
</template>

<script>
// echarts 5 版本需要把全部的引入进来
import * as ec from 'echarts'

export default {
  name: "sidebar_type",
  data() {
    return {
      colorList: ['#FFF016', '#559FFF', '#00F4FF', "#6F55F1", "#FF88E7", "#0098FF"],
      echartsinstance: null,
      options: {
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
        },

        tooltip: {
          trigger: 'item',
          formatter: '{b}  {d}%',
        },
        label: {
          color: "white"
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            data: [
              {value: 40, name: '温度传感器 40个'},
              {value: 30, name: '温湿度传感器 30个'},
              {value: 10, name: '局放传感器 10个'},
              {value: 10, name: '震动传感器 10个'},
              {value: 8, name: '除湿器传感器 8个'},
              {value: 12, name: '电流传感器 12个'},
            ],
            itemStyle: {
              color: (params) => {
                var index = params.dataIndex;
                return this.colorList[index];
              },
            },
            textStyle: {
              color: "#ffffff"
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

          }
        ]
      },


    }
  },
  mounted() {
    this.echartsinstance = ec.init(this.$refs.type_charts)
    this.echartsinstance.setOption(this.options)
  },
  watch: {
    options() {
      this.echartsinstance.setOption(this.options)
    }
  }
}
</script>

<style lang="scss" scoped>
// @import url(../assets/style/sidebar_type.scss);

.sidebar_type_content {
  .title {
    width: 100%;
    height: vh(35);
    padding-left: vw(35);
    font-size: vh(22);
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #04DEFF;
    position: relative;

    p {
      position: absolute;
      bottom: 0;
    }
  }

  #charts {
    width: 100%;
    height: vh(269.2-35);

  }
}

.sidebar_type_content {
  width: vw(478.67);
  height: vh(269.2);
  margin-left: vw(53);
  margin-top: vh(17);
  background: linear-gradient(180deg, rgba(0, 47, 111, 0.7) 0%, rgba(0, 34, 80, 0.5) 100%);
  opacity: 1;
  border: 1px solid rgba(117, 210, 227, 0.07);

  background-image: url('../assets/image/sidebar_type.png');
  background-repeat: no-repeat;
  background-position: center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
</style>
